<template>
  <div class="product-box">
    <!--    <div class="header">{{ $t('h.B012') }}</div>-->
    <div class="product-nav margin-top">
      <van-icon name="arrow-left" :size="28" @click="$router.go(-1)"></van-icon>
      <div class="nav">
        {{ navName }}
        <!--        <div @click="active=2" class="item"><p :class="{'active':active===2}">活动折扣</p><span v-if="active===2"/>-->
        <!--        </div>-->
      </div>
      <img @click="goNext('/search')" src="@/assets/image/search-o.png" alt="">
    </div>
    <div class="product-nav product-top">
      <div :class="['item-nav','center',(index === activeNav && index===0)? 'active' : '']" v-for="(item,index) in navTop" :key="index" @click="selectAll(index)">
        {{ item.title }}
        <template v-if="item.sort" >
          <sort-icon v-model="item.order" @change="selectSort(item.type,item.order,index)"/>
        </template>
      </div>
      <!--      <div class="item-nav center">{{ $t('h.B015') }}-->
      <!--        <sort-icon/>-->
      <!--        &lt;!&ndash;        <img src="@/assets/image/sort.jpeg" alt="">&ndash;&gt;-->
      <!--      </div>-->
      <!--      <div class="item-nav center">{{ $t('h.B016') }}-->
      <!--        <img src="@/assets/image/sort.jpeg" alt="">-->
      <!--      </div>-->
      <!--      <div class="item-nav center">{{ $t('h.B017') }}-->
      <!--        <img src="@/assets/image/sort.jpeg" alt="">-->
      <!--      </div>-->
    </div>
    <div class="product-list-box">
      <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="$t('h.A022')"
          @load="onLoad"
      >
        <div class="product-nav-goods" ref="productList">
          <div @click="toClick('/goods',items)" v-for="(items,index1) in goods" :key="index1" class="item">
            <div v-if="active===2" class="item-tip">
              <p>1%</p>
              <p>OFF</p>
            </div>
            <img :src="items.mainimage" alt="">
            <p class="item-price">$ {{ items.price }}</p>
            <p class="item-sale">{{ $t('h.B018') }} {{ items.category }}</p>
            <p class="item-content"> {{ items.name }} </p>
          </div>
        </div>
      </van-list>
    </div>


    <van-popup
        :overlay="false"
        v-model="showProduct"
        position="left"
        closeable
        close-icon-position="top-right"
        :style="{ width: '300px',height:'100vh',margin:'60px 0'}">
      <div class="open-menu">
        <div class="top-title">
          <img src="@/assets/image/menu.png" alt=""> {{ $t('h.B019') }}
        </div>
        <div class="category-list">
          <van-tree-select
              height="80vh"
              :items="categoryTree"
              :active-id.sync="activeId"
              :main-active-index.sync="activeIndex"
              @click-item="onClickItem"
          />
        </div>

      </div>
    </van-popup>
  </div>
</template>

<script>
import {productList} from '@/api/apiFox';
import sortIcon from '@/components/icon/sort.vue';

export default {
  components: {
    sortIcon,
  },
  data() {
    return {
      active: 1,
      showProduct: false,
      activeName: '1',
      goods: [],
      activeNav:0,
      navTop: [
        {
          title: this.$t('h.B014'),
          sort: false,
        }, {
          title: this.$t('h.B015'),
          type: 'sales_volume',
          order: '',
          sort: true,
        }, {
          title: this.$t('h.B016'),
          type: 'price',
          order: '',
          sort: true,
        }, {
          title: this.$t('h.B017'),
          type: 'new',
          order: '',
          sort: true,
        },
      ],
      categoryName: this.$t('h.B013'),
      categoryTree: [],
      queryParams: {
        page: 1,
      },
      activeId: 1,
      activeIndex: 0,
      loading: false,
      finished: false,
    };
  },
  computed: {
    navName() {
      return this.$route.query?.name || '';
    }
  },
  methods: {
    selectAll(index){
      if(index === 0){
        this.activeNav = index;
        const current = this.navTop.findIndex(item => item.order)
        this.$set(this.navTop[current],'order','');
        this.$delete(this.queryParams, 'type');
        this.$delete(this.queryParams, 'order');
        this.goods = [];
        this.queryParams.page = 1;
        this.loading = true;
        this.getList();
      }
    },
    selectSort(type, order,index) {
      this.navTop.forEach((item,idx) => {
        if(idx !== index && index !== 0) item.order = '';
      })
      if (order) {
        this.$set(this.queryParams, 'type', type);
        this.$set(this.queryParams, 'order', order);
      }else{
        this.$delete(this.queryParams, 'type');
        this.$delete(this.queryParams, 'order');
      }
      this.activeNav = index;
      this.goods = [];
      this.queryParams.page = 1;
      this.loading = true;
      this.getList();
    },
    toClick(path, item) {
      this.$router.push({
        path: path,
        query: {id: item.id,shop:item.shop_id}
      });
    },
    goNext(item) {
      this.$router.push(item);
    },
    getList() {
      let self = this;

      productList({
        ...self.queryParams,
        pid:this.$route.params.pid || null
      }).then(res => {
        self.goods = [...self.goods, ...res.data.list.data];
        self.loading = false;
        if (self.queryParams.page == res.data.list.last_page || res.data.list.last_page === 0) {
          self.finished = true;
        }
      });
    },
    buildCategoryTree(categories) {
      let tree = [];
      let lookup = {};

      // 创建节点对象
      categories.forEach(item => {
        let newItem = {...item, children: []};
        lookup[item.id] = newItem;
        tree.push(newItem);
      });

      // 构建树结构
      categories.forEach(item => {
        const parent = lookup[item.pid];
        if (parent) {
          parent.children.push(lookup[item.id]);
        }
      });

      // 返回根节点数组
      return tree.filter(item => item.pid === 0);
    },
    convertData(data) {
      return data.map(item => ({
        text: item.name,
        value: item.id,
        children: item.children ? this.convertData(item.children) : []
      }));
    },
    onClickItem(data) {
      this.activeId = Number(data);
      this.queryParams.pid = Number(data.value);
      this.queryParams.page = 1;
      this.categoryName = data.text;
      //TODO 关掉弹框 去请求数据
      this.showProduct = false;
      this.goods = [];
      setTimeout(() => {
        this.getList();
      });

    },
    onLoad() {
      let self = this;
      self.loading = true;
      // self.queryParams.page++;
      setTimeout(() => {
        self.getList();
      }, 500);
    }
  },
  created() {
    // let self = this;
    // self.getList();
  }
};
</script>

<style scoped lang="scss">
.product-box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 3%;

  .header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: #fff;
    height: 45px;
    width: 100%;
    text-align: center;
    line-height: 45px;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 16px;
  }

  .margin-top {
    margin-top: 20px;
  }

  .product-nav {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      height: 40px;
    }

    .nav {
      width: calc(100% - 46px - 28px);
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  }

  .product-top {
    width: 100%;
    justify-content: space-between;

    .item-nav {
      font-size: 14px;
      text-align: left;
    }

    .center {
      display: flex;
      align-items: center;
      &.active{
        color: #002FFF;
      }
      img {
        margin-left: 5px;
        height: 16px;
      }
    }
  }


  .open-menu {
    width: 100%;
    height: 100%;
    background: #f6f6f6;

    .top-title {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 14px;
      padding: 0 0 0 5px;
      box-sizing: border-box;

      img {
        margin-right: 10px;
        height: 30px;
      }

    }

    .main {
      .item {
        padding: 0 0 0 20px;
        box-sizing: border-box;
        height: 40px;
        width: 100%;
        font-size: 12px;
        color: #333;
      }
    }

    ::-webkit-scrollbar {
      display: none;
    }

  }

}

.product-list-box {
  padding: 0 0 100px 0;

  .product-nav-goods {
    width: 100%;
    display: flex;
    justify-content: space-between;
    //background: #333;
    flex-wrap: wrap;

    //margin-bottom: 80px;

    .item {
      position: relative;
      margin-bottom: 10px;
      width: 160px;
      min-height: 220px;
      padding: 6px;
      border: 1px solid #f6f6f6;

      .item-tip {
        position: absolute;
        right: 0;
        top: 0;
        height: 35px;
        background-position: top center;
        background: url("../../assets/image/sell.png") 50% 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        width: 35px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 5px 0;
        box-sizing: border-box;

        p {
          color: #fff;
          width: 100%;
          text-align: center;
          font-size: 8px;
        }
      }

      img {
        width: 160px;
        height: 160px;
      }

      .item-price {
        margin-top: 10px;
        width: 100%;
        color: #002FFF;
        font-size: 16px;
        font-weight: 500;
      }

      .item-sale {
        width: 100%;
        color: #999;
        font-size: 10px;
        margin: 5px 0;
      }

      .item-content {
        width: 100%;
        color: #000;
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

</style>
<style scoped>
>>> .van-cell {
  background: none !important;
}

>>> .van-collapse-item__content {
  background: none !important;
}

</style>
